<template>
  <div class="main">
    <govheader
      title="化工产业大脑·产业运行监测"
      @zfNameflagChange="zfNameflagChange"
    ></govheader>
    <govnavigation></govnavigation>
    <el-row
      class="content"
      style="margin: 0; position: relative"
      :gutter="20"
      v-if="zfNameflag"
    >
      <el-col :span="8" class="content-left">
        <el-col class="box">
          <div class="title">
            <p>产业月度经济趋势</p>
          </div>
          <div class="content-body" style="margin-top: 3px">
            <div style="width: 100%; position: relative">
              <div
                v-show="echarts1ShowFlag"
                id="revenuestr"
                style="width: 100%; height: 194px"
              ></div>
              <div class="content_box">
                <span
                  @click="activeClick('active1', 0)"
                  :class="active1 == 0 ? 'active' : ''"
                  >应税收入</span
                >
                <span
                  @click="activeClick('active1', 1)"
                  :class="active1 == 1 ? 'active' : ''"
                  >税收</span
                >
              </div>
              <div
                v-show="!echarts1ShowFlag"
                style="
                  width: 100%;
                  height: 194px;
                  color: #909399;
                  font-size: 14px;
                  text-align: center;
                  line-height: 194px;
                "
              >
                暂无数据
              </div>
            </div>
          </div>
        </el-col>
        <el-col class="box">
          <div class="title">
            <p>区域月度经济趋势</p>
          </div>
          <div class="box5 fl" style="width: 100%">
            <div style="position: relative">
              <div id="tableColorstr" style="height: 230px"></div>
              <div class="content_box">
                <span
                  @click="activeClick('active2', 0)"
                  :class="active2 == 0 ? 'active' : ''"
                  >应税收入</span
                >
                <span
                  @click="activeClick('active2', 1)"
                  :class="active2 == 1 ? 'active' : ''"
                  >税收</span
                >
              </div>
              <div id="Colorstr">
                <el-select v-model="value" @change="selectchange">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
        </el-col>
        <el-col class="box" style="margin-bottom: 5px">
          <div class="title">
            <p>园区月度经济排名</p>
          </div>
          <div class="content-body" id="tableColor1" style="margin-top: 0">
            <el-col :span="24">
              <div id="enterpriseNumberstr" style="width: 100%; height: 210px">
                <div class="content_box1">
                  <span
                    @click="activeClick('active3', 0)"
                    :class="active3 == 0 ? 'active' : ''"
                    >应税收入</span
                  >
                  <span
                    @click="activeClick('active3', 1)"
                    :class="active3 == 1 ? 'active' : ''"
                    >税收</span
                  >
                </div>
                <el-table
                  :data="tableData"
                  ref="tableData"
                  style="width: 100%"
                  :row-style="{ height: '0' }"
                  :cell-style="{ padding: '6px 0' }"
                  stripe
                  :row-class-name="tableRowClassName"
                  height="160"
                >
                  <el-table-column
                    type="index"
                    label="排名"
                    align="center"
                    width="50"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="parkName"
                    label="园区名称"
                    align="center"
                    :show-overflow-tooltip="true"
                    width="180"
                  >
                  </el-table-column>
                  <el-table-column
                    :prop="taxableSalesIncome"
                    align="center"
                    label="应税收入（亿元）"
                  >
                  </el-table-column>
                </el-table>
              </div>
            </el-col>
          </div>
        </el-col>
      </el-col>
      <el-col
        :span="8"
        class="content-center"
        style="background-color: (255, 255, 255, 0.5); position: relative"
      >
     <div style="position: relative;">
          <div id="mapstr" style="width: 100%; height: 510px"></div>
         <div style="position: absolute;bottom: 0;color:#00E4FF;font-size: 12px">此页面经济相关数据来源时间：{{dataTime}}年</div>
     </div>

        <div class="box" style="margin-top: 15px; margin-bottom: 5px">
          <div class="title">
            <p>化工产业主要产品产量</p>
          </div>
          <div class="content-body" style="margin-top: 5px">
            <div style="width: 100%; float: left; position: relative">
              <div id="workmanshipstr" style="width: 100%; height: 205px"></div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8" class="content-right">
        <el-col class="box">
          <div class="title">
            <p>区域企业产能利用率</p>
          </div>
          <div style="width: 100%; height: 207px">
            <div style="width: 50% !important; height: 100%; float: left">
              <div
                id="sourcestr"
                style="width: 100% !important; height: 100%"
              ></div>
            </div>
            <div
              style="
                width: 50% !important;
                height: 100%;
                float: left;
                position: relative;
              "
            >
              <div class="enterprise-body">
                <div
                  class="enterprise-content"
                  v-for="(item, index) in option3xseries"
                  :key="index"
                >
                  <div
                    class="enterprise-color"
                    :style="{ background: item.itemStyle.color }"
                  ></div>
                  <div class="enterprise-type">{{ item.name }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col class="box">
          <div class="title" style=" position: relative">
            <p>产业用电指数对比</p>
      <p style="position: absolute;    right: -168px;
    top: 5px;color: rgb(0, 228, 255);" >数据来源：产业链一键通</p>
          </div>
          <div class="content-body"  style=";margin: 4px auto">

            <div id="contentbox" style="width: 100%; height: 212px"></div>
          </div>
        </el-col>
        <div class="box" style="width: 100%; float: left; margin-bottom: 5px">
          <div class="title">
            <!-- <p>产业进出口率对比</p> -->
            <p>亩均趋势对比</p>
          </div>
          <div class="content-body" style="margin: 5px auto; height: 210px">
            <div id="tableColor2str" style="width: 100%; height: 100%"></div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
</script>
<script>
const echarts = require("echarts");
import dd from "gdt-jsapi";
import govheader from "@/components/govheader2";
import govnavigation from "@/components/govnavigation2";
import "echarts-gl";
import { color, number } from "echarts";

export default {
  name: "zfIntelligentDiagnostic",
  components: { govheader, govnavigation },
  data() {
    return {
      zfNameflag: true,
      colorList: [
        "rgba(0, 255, 255, 1)",
        "rgba(78, 153, 236, 1)",
        "rgba(29, 90, 204, 1)",
        "rgba(110, 145, 165, 1)",
        "rgba(107, 213, 159, 1)",
        "rgba(174, 207, 156, 1)",
        "rgba(234, 232, 122, 1)",
        "rgba(205, 155, 136, 1)",
        "rgba(255, 205, 94, 1)",
        "rgba(190, 135, 220, 1)",
        "rgba(174, 66, 234, 1)",
      ],
      taxableSalesIncome: "resultValue",
      tableData: [],

      options: [
        {
          value: "杭州市",
          label: "杭州市",
        },
        {
          value: "宁波市",
          label: "宁波市",
        },
        {
          value: "温州市",
          label: "温州市",
        },
        {
          value: "嘉兴市",
          label: "嘉兴市",
        },
        {
          value: "湖州市",
          label: "湖州市",
        },
        {
          value: "绍兴市",
          label: "绍兴市",
        },
        {
          value: "金华市",
          label: "金华市",
        },
        {
          value: "衢州市",
          label: "衢州市",
        },
        {
          value: "舟山市",
          label: "舟山市",
        },
        {
          value: "丽水市",
          label: "丽水市",
        },
        {
          value: "台州市",
          label: "台州市",
        },
      ],
      value: "",
      year: "",
      echarts1ShowFlag: true,
      myChart1: "",
      myChart2: "",
      myChart3: "",
      myChart4: "",
      myChart5: "",
      myChart6: "",
      myChart7: "",
      myCharttimer: "",
      option1: "",
      option2: "",
      option3: "",
      option4: "",
      option5: "",
      option6: "",
      option7: "",
      myChart6IntervalId: "",
      myChart7IntervalId:"",
      active1: 0,
      active2: 0,
      active3: 0,
      dataTime:"2020",
      startCharts1: null,
      startCharts2: null,
      startCharts3: null,
      startCharts4: null,
      startCharts5: null,
      startCharts6: null,
      startCharts7: null,
      option1xAxis: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      option1data1: [], //今年应税收入 区域月度经济趋势
      option1data2: [], //今年税收 区域月度经济趋势
      option1data3: [], //去年应税收入 区域月度经济趋势
      option1data4: [], //去年税收 区域月度经济趋势
      option2data1: [], //产业月度经济趋势taxableSalesIncome
      option2data2: [], //产业月度经济趋势taxableSalesIncome
      option2data3: [], //产业月度经济趋势taxRevenue
      option2data4: [], //产业月度经济趋势taxRevenue
      option5xseriesdata1: [],
      option5xseriesdata2: [],
      option5xseriesdata3: [],
      option5xAxis: [],
      option2xdata1: [],
      option2xdata2: [],
      option2xdata3: [],
      option2xdata: [],
      itemStylecolor: [
        "#00FFFF",
        "#0572EA",
        "#6BD59F",
        "#EAE87A",
        "#FFCD5E",
        "#AE42EA",
        "#4E99EC",
        "#6E91A5",
        "#AECF9C",
        "#CD9B88",
        "#BE87DC",
      ],
      option3xseries: [],
      option1xseriesdata1: [],
      option1xseriesdata2: [],

      option2xAxis: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      option6xAxis: [],
      option2xseriesdata1: [],
      option2xseriesdata2: [],
      option6xseriesdata1: [
        10, 18, 103, 11, 12, 12, 9, 10, 11, 13, 11, 12, 12, 9,
      ],
      option6xseriesdata2: [1, -2, 2, 5, 3, 2, 0, 1, -2, 2, 5, 3, 2, 0],
      option6xseriesdata3: [1, -2, 2, 5, 3, 2, 0, 1, -2, 2, 5, 3, 2, 0],
      option6xseriesdata4: [
        10, 18, 103, 11, 12, 12, 9, 10, 11, 13, 11, 12, 12, 9,
      ],
      MyChartdata: [],
      num: 1,
      setime:"1",
      option7xAxis: [],
      option7xseriesdata1: [],
      option7xseriesdata2: [],
      option8xAxis: [],
      option8xseriesdata1: [],
      option8xseriesdata2: [],
      data1: [],
      data2: [],
      data3: [],
      datasetInterval: null,
      data1name: [],
      data2name: [],
      data3name: [],
      timersetInterval: null,
    };
  },
  created() {
    if (window.SITE_CONFIG["sitURL"] === "https://www.plantmate.com/api") {
      dd.getAuthCode({})
        .then((res) => {
          if (res) {
            let params = {
              applicationFlag: "20",
              authCode: res.auth_code,
            };
            this.$http
              .post(`/home/sys/loginfree/authentication`, params)
              .then(({ data: res }) => {
                console.log('res2:', res)
                localStorage.setItem('buriedPointInformation',JSON.stringify(res.data))
                this.$store.commit('zfName', res.data.lastName)
                if (res.code !== 0) {
                  this.zfNameflag = false;
                }
              })
              .catch(() => {
                this.zfNameflag = false;
              });
          }
        })
        .catch(() => {
          this.zfNameflag = false;
        });
    }
  },
  mounted() {
    var that = this;
    this.$http
      .post(`/home/government/industryMonitor/industryMonitor`, {
        city: "杭州市",
        rankType: "taxable_sales_income",
      })

      //  value: 300,
      //   name: "Video",
      //   itemStyle: {
      //     color:
      //   },
      .then(({ data: res }) => {
        // console.log(res.data);
        // console.log( res.data.cityIndex);
        // console.log(res.data.month);
       var arr=res.data.month.split('-')
       this.setime=arr[1]
      //  console.log(arr);
        this.dataTime=res.data.year
        this.option3xseries = res.data.cityElectric.map((i, index) => {
          i.name = i.city;
          i.value = i.perBegin;
          i.itemStyle = {
            color: that.itemStylecolor[index],
          };
          return i;
        });
        res.data.cityIndex.forEach((i) => {
          that.option7xAxis.push(i.city);
          that.option7xseriesdata1.push(i.index);
          that.option7xseriesdata2.push(i.per);
        });
        if (res.data.linShi) {
          res.data.linShi.forEach((i) => {
            that.option8xAxis.push(i.city);
            /*环比 */ that.option8xseriesdata1.push(i.cityAddPer);
            that.option8xseriesdata2.push(i.taxPerMu);
          });
        }
        this.option1data1 = res.data.CountyTaxableSalesIncome; //  今年应税收入 区域月度经济趋势
        this.option1data3 = res.data.LastCountyTaxableSalesIncome; //去年应税收入 区域月度经济趋势
        this.option1xseriesdata1 = this.option1data1; //默认今年应税收入 区域月度经济趋势
        this.option1xseriesdata2 = this.option1data3; //默认去年应税收入 区域月度经济趋势
        this.option1data2 = res.data.CountyTaxRevenue; //今年税收 区域月度经济趋势
        this.option1data4 = res.data.LastCountyTaxRevenue; //去年税收 区域月度经济趋势
        this.option2data1 = res.data.taxableSalesIncome; //今年应税收入  产业月度经济趋势
        this.option2xseriesdata1 = this.option2data1; //默认今年应税收入  产业月度经济趋势
        this.option2data2 = res.data.lastTaxableSalesIncome; //去年应税收入  产业月度经济趋势
        this.option2xseriesdata2 = this.option2data2; //默认去年应税收入  产业月度经济趋势
        this.option2data3 = res.data.taxRevenue; //今年税收 产业月度经济趋势
        this.option2data4 = res.data.lastTaxRevenue; //去年税收 产业月度经济趋势
        res.data.cityMonthTaxVoList.forEach((i) => {
          i.name = i.city;
        });
        let {
          so2,
          hcl,
          naOH,
          naCO,
          c2H4,
          c3H6,
          c6H6,
          c8H10,
          nH3List,
          fertilizerList,
          paint,
          plastics,
          fibre,
          fibreMix,
        } = res.data;
        //硫酸,盐酸,烧碱,纯碱,乙烯,丙烯,纯苯,对二甲苯,合成氨,农用氮,  涂料,初级形态塑料,合成纤维单体,合成纤维聚合物
        this.data1.push(so2);
        this.data1.push(hcl);
        this.data1.push(naOH);
        this.data1.push(naCO);
        this.data1.push(c2H4);
        this.data2.push(c3H6);
        this.data2.push(c6H6);
        this.data2.push(c8H10);
        this.data2.push(nH3List);
        this.data2.push(fertilizerList);
        this.data3.push(paint);
        this.data3.push(plastics);
        this.data3.push(fibre);
        this.data3.push(fibreMix);
        this.option5xAxis = res.data.productsMonthList; //化工产业主要产品产量
        this.MyChartdata = res.data.cityMonthTaxVoList; //地图数据
        this.tableData = res.data.parkRankList; //表格数据
        this.year = new Date().getFullYear() - 1;
        this.value = this.options[0].label; //默认显示杭州
        this.getright_table("tableData"); //表格滚动

        this.data1name = ["硫酸", "盐酸", "烧碱", "纯碱", "乙烯"];
        this.data2name = [
          "丙烯",
          "纯苯",
          "对二甲苯(PX)",
          "合成氨（无水氨）",
          "农用氮、磷、钾化学肥料（折纯）",
        ];
        this.data3name = [
          "涂料",
          "初级形态塑料",
          "合成纤维单体",
          "合成纤维聚合物",
          "",
        ];
        this.data1 = this.data1.map((i) => {
          var str = i.map((res) => {
            return Number(res.output);
          });
          return str;
        });
        this.data2 = this.data2.map((i) => {
          var str = i.map((res) => {
            return Number(res.output);
          });
          return str;
        });

        this.data3 = this.data3.map((i) => {
          var str = i.map((res) => {
            return Number(res.output);
          });
          return str;
        });
        this.data3.push([]);
        this.getworkmanshipstr();
        this.option5.series.forEach((i, index) => {
          i.data = this.data1[index];
          i.name = this.data1name[index];
        });
        this.myChart5.setOption(this.option5);
        this.getsetInterval();
        this.getsourcestr();
        this.gettableColor2str();

        this.$nextTick(() => {
          this.getrevenuestr(); //区域月度经济趋势渲染折线图
          this.gettableColorstr(); //产业月度经济趋势柱状图
          this.renderMyChart(); //地图渲染
          this.getcontentbox();
        });
      });
  },
  beforeDestroy() {
    clearInterval(this.startCharts1);
    clearInterval(this.startCharts2);
    clearInterval(this.startCharts3);
    clearInterval(this.startCharts4);
    clearInterval(this.startCharts5);
    clearInterval(this.startCharts6);
    clearInterval(this.startCharts7);
  },
  methods: {
    renderMyChart() {
      var _this = this;
      this.myChart4 = echarts.init(document.getElementById("mapstr"));
      let uploadedDataURL = require("../zhejiang.json");
      echarts.registerMap("zhejiang", uploadedDataURL);

      this.option4 = {
        title: {
          text: "",
          top: "10px",
          textStyle: {
            fontSize: 14,
            width: "100%",
            color: "#1c4ca1",
          },
        },
        tooltip: {
          trigger: "item",
          extraCssText: "z-index: 9",
          backgroundColor: "transparent",
          borderWidth: 0,
          padding: 0,
          textStyle: {
            color: "#ffffff",
          },
          formatter: function (para) {
            if (para.seriesType === "map") {
              let str = `<div style="position: relative;border:1px solid #00d3e7;background-color:rgba(10, 39, 116, .5)">
                <div style="width: 10px;height: 10px;position:absolute;border-top: 3px solid #00d3e7;border-left: 3px solid #00d3e7;left: -3px;top: -3px; "></div>
                <div style="width: 10px;height: 10px;position:absolute;border-top: 3px solid #00d3e7;border-right: 3px solid #00d3e7;right: -3px;top: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-bottom:3px solid #00d3e7;border-right: 3px solid #00d3e7;right: -3px;bottom: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-bottom:3px solid #00d3e7;border-left: 3px solid #00d3e7;left: -3px;bottom: -3px;"></div>`;

              str +=
                ' <div  style="padding: 10px;"><div style="color:#EEBF43;text-align: center;font-weight: 600"; >' +
                para.name +
                "</div>" +
                '<div  style=" font-size: 12px;"><span style="color:#E4E4E4;   display: inline-block; width: 80px;">&nbsp;规上企业数量</span>&nbsp;&nbsp;&nbsp;  <span  style=" padding-left: 5px;  color: #00E4FF !important;" >' +
                para.data.entNum +
                "(家)</span></div>" +
                '<div style=" font-size: 12px;"><span style="color:#E4E4E4;   font-size: 12px; display: inline-block; width: 80px;">&nbsp;应税收入</span>&nbsp;&nbsp;&nbsp;  <span  style=" padding-left: 5px;  color: #00E4FF !important;" >' +
                para.data.taxSalesRevenue +
                "(亿元)</span></div>" +
                '<div style=" font-size: 12px;"><span style="color:#E4E4E4;   font-size: 12px;display: inline-block; width: 80px;">&nbsp;税收</span>&nbsp;&nbsp;&nbsp;  <span  style=" padding-left: 5px;  color: #00E4FF !important;" >' +
                para.data.taxRevenue +
                "(亿元)</span></div>" +
                '<div  style=" font-size: 12px;"><span style="color:#E4E4E4;     font-size: 12px;display: inline-block; width: 80px;">&nbsp;企业开工率</span>&nbsp;&nbsp;&nbsp;  <span  style=" padding-left: 5px;  color: #00E4FF !important;" >' +
                para.data.perBegin +
                "%</span></div></div></div>";

              return str;
            } else {
              return "";
            }
          },
        },
        series: [
          {
            type: "map",
            mapType: "zhejiang", // 自定义扩展图表类型
            label: {
              show: true,
              color: "#ffffff",
            },
            itemStyle: {
              areaColor: "#113D8D",
              borderColor: "rgb(27, 172, 255)",
              borderWidth: 1,
            },
            map: "zhejiang",
            // center: [104.114129, 37.550339],//当前视角的中心点
            zoom: 1, // 当前视角的缩放比例
            roam: true, // 是否开启平游或缩放
            scaleLimit: {
              // 滚轮缩放的极限控制
              min: 1,
              max: 2,
            },
            emphasis: {
              itemStyle: {
                areaColor: "#005DDC",
              },
              label: {
                color: "#ffffff",
              },
            },
            select: {
              itemStyle: {
                areaColor: "#005DDC",
              },
              label: {
                color: "#ffffff",
              },
            },
            data: _this.MyChartdata,
          },
        ],
      };
      this.myChart4.setOption(this.option4);
      this.autoPlay(_this.myChart4, _this.option4, "startCharts1");
    },
    addEvent(obj, sEvent, fn) {
      if (obj.attachEvent) {
        obj.attachEvent("on" + sEvent, fn);
      } else {
        obj.addEventListener(sEvent, fn, false);
      }
    },

    autoPlay(myChart, option, timer) {
      var _this = this;
      let flag = true;
      let charPiecurrentIndex = 0;
      // 鼠标移动上去的时候的高亮动画
      myChart.on("mouseover", function (param) {
        flag = false;
        clearInterval(_this[timer]);
        // 取消之前高亮图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });

        charPiecurrentIndex = param.dataIndex;
        // **解决文章所述问题**// //记录上一次选中值重新进入时取消高亮

        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: param.dataIndex,
        });

        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: param.dataIndex,
        });
      });

      // 图标随窗口大小缩放
      window.addEventListener("resize", function () {
        myChart.resize();
      });

      // 自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen;

        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        // 显示 tooltip
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
      };

      _this[timer] = setInterval(chartHover, 4000);
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on("mouseout", function (param) {
        if (!flag) {
          _this[timer] = setInterval(chartHover, 4000);
          flag = true;
        }
      });

    },
    autoPlay2(myChart, option, timer) {
      var _this = this;
      let flag = true;
      let charPiecurrentIndex = 0;
      // 鼠标移动上去的时候的高亮动画
      myChart.on("mouseover", function (param) {
        flag = false;
        console.log(_this);
        clearInterval(_this.datasetInterval);
        clearInterval(_this[timer]);
        // 取消之前高亮图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });

        charPiecurrentIndex = param.dataIndex;
        // **解决文章所述问题**// //记录上一次选中值重新进入时取消高亮

        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: param.dataIndex,
        });

        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: param.dataIndex,
        });
      });

      // 图标随窗口大小缩放
      window.addEventListener("resize", function () {
        myChart.resize();
      });

      // 自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen;

        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        // 显示 tooltip
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
      };

      _this[timer] = setInterval(chartHover, 4000);
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on("mouseout", function (param) {
        if (!flag) {
          _this[timer] = setInterval(chartHover, 4000);
          //  _this.getsetInterval();
          flag = true;
        }
      });

    },
    mapAutoPlay(myChart, option, timer) {
      var _this = this;
      let flag = true;

      let charPiecurrentIndex = 0;
      // 鼠标移动上去的时候的高亮动画
      myChart.on("mouseover", function (param) {
        if (param.componentType === "series") {
          flag = false;
          clearInterval(timer);
          //取消之前高亮图形
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: charPiecurrentIndex,
          });

          charPiecurrentIndex = param.dataIndex;
          //**解决文章所述问题**// //记录上一次选中值重新进入时取消高亮
          let data = option.series[0].data[charPiecurrentIndex];
          if (data) {
            _this.parkInfo.parkName = data[2];
            _this.parkInfo.entQty = data[3];
            _this.parkInfo.address = data[4];
            _this.parkInfo.primeMoverIndustry = data[5];
            _this.parkInfo.parkMainIncome = data[6];
          }

          //高亮当前图形
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: param.dataIndex,
          });

          myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: param.dataIndex,
          });
        }
      });

      //图标随窗口大小缩放
      window.addEventListener("resize", function () {
        myChart.resize();
      });

      //自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen;

        let data = option.series[0].data[charPiecurrentIndex];
        _this.parkInfo.parkName = data[2];
        _this.parkInfo.entQty = data[3];
        _this.parkInfo.address = data[4];
        _this.parkInfo.primeMoverIndustry = data[5];
        _this.parkInfo.parkMainIncome = data[6];

        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        // 显示 tooltip
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
      };

      //高亮当前图形
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0,
      });

      timer = setInterval(chartHover, 5000);
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on("mouseout", function (param) {
        if (!flag) {
          timer = setInterval(chartHover, 5000);
          flag = true;
        }
      });

    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "table-row1";
      } else {
        return "table-row2";
      }
    },
    zfNameflagChange(val) {
      this.zfNameflag = val;
    },
    getrevenuestr() {
      this.myChart1 = echarts.init(document.getElementById("revenuestr"));
      this.option1 = {
        // animationDuration: 3000,
        tooltip: {
          trigger: "axis",

          confine: true,
        },
        legend: {
          show: true,

          textStyle: {
            // 图例文字的样式
            color: "#fff",
          },
        },
        dataZoom: [
          {
            type: "inside",
            startValue: 0,
            endValue: 8,
            xAxisIndex: [0],
            zoomLock: true,
          },
        ],
        grid: {
          left: "5%",
          right: "2%",
          bottom: "10%",
          top: "25%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
            },
            axisLine: {
              // 这是y轴文字颜色
              lineStyle: {
                color: "#BFF7FF",
              },
            },
            data: this.option1xAxis,
          },
        ],
        yAxis: {
          type: "value",
          name: "亿元",
          splitLine: {
            lineStyle: {
              color: "#8DAFDD",
            },
          },
          axisLine: {
            // 这是y轴文字颜色
            lineStyle: {
              color: "#BFF7FF",
            },
          },
        },
        series: [
          {
            type: "line",
            name: "2020年",

            itemStyle: {
              color: "rgba(70, 180, 121, 1)",
            },
            data: this.option2xseriesdata2,
          },
          {
            type: "line",
            name: "2021年",
            barWidth: 15,
           itemStyle: {
              color: "rgba(239, 134, 50, 1)",
            },
            data: this.option2xseriesdata1,
          },
        ],
      };
      this.myChart1.setOption(this.option1);
      this.autoPlay(this.myChart1, this.option1, "startCharts1");
      let num1 = 0;
      let num2 = 8;
      this.myCharttimer = setInterval(() => {
        if (
          this.option1.dataZoom[0].startValue + 1 ===
          this.option1.series[0].data.length
        ) {
          num1 = 0;
          num2 = 8;
          this.option1.dataZoom[0].startValue = num1;
          this.option1.dataZoom[0].endValue = num2;
        } else {
          this.option1.dataZoom[0].startValue = num1 += 1;
          this.option1.dataZoom[0].endValue = num2 += 1;
        }
        this.myChart1.setOption(this.option1);
      }, 4000);

      this.$once("hook:beforeDestroy", () => {
        clearInterval(this.myCharttimer);
        console.log("myChart1的定时器取消了");

        this.myCharttimer = null;
      });
    },
    gettableColorstr() {
      this.myChart2 = echarts.init(document.getElementById("tableColorstr"));
      this.option2 = {
        animationDuration: 5000,
        tooltip: {
          trigger: "axis",
          confine: true,
          extraCssText: "z-index: 10",
        },
        legend: {
          show: true,
          textStyle: {
            // 图例文字的样式
            color: "#fff",
          },
          left: "20%",
        },
        dataZoom: [
          {
            type: "inside",
            startValue: 0,
            endValue: 6,
            xAxisIndex: [0],
            zoomLock: true,
          },
        ],
        grid: {
          left: "5%",
          right: "5%",
          bottom: "10%",
          top: "25%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
            },
            axisLine: {
              // 这是y轴文字颜色
              lineStyle: {
                color: "#BFF7FF",
              },
            },
            data: this.option2xAxis,
          },
        ],
        yAxis: {
          type: "value",
          name: "亿元",
          splitLine: {
            lineStyle: {
              color: "#8DAFDD",
            },
          },
          axisLine: {
            // 这是y轴文字颜色
            lineStyle: {
              color: "#BFF7FF",
            },
          },
        },
        series: [
          {
            type: "bar",
            name: "2020年",
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      // 0% 处的颜色
                      offset: 0,
                      color: "#02C6FF",
                    },
                    {
                      // 100% 处的颜色
                      offset: 1,
                      color: "rgba(2, 198, 255, 0) ",
                    },
                  ],
                  false
                ),
              },
            },
            data: this.option1xseriesdata2,
          },
          {
            type: "bar",
            name: "2021年",
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      // 0% 处的颜色
                      offset: 0,
                      color: "#32D5A5",
                    },
                    {
                      // 100% 处的颜色
                      offset: 1,
                      color: "rgba(2, 198, 255, 0)",
                    },
                  ],
                  false
                ),
              },

            },
            data: this.option1xseriesdata1,
          },
        ],
      };
      this.myChart2.setOption(this.option2);
      this.autoPlay(this.myChart2, this.option2, "startCharts2");
      let num1 = 0;
      let num2 = 8;
      this.timersetInterval = setInterval(() => {
        if (
          this.option2.dataZoom[0].startValue + 1 ===
          this.option2.series[0].data.length
        ) {
          num1 = 0;
          num2 = 8;
          this.option2.dataZoom[0].startValue = num1;
          this.option2.dataZoom[0].endValue = num2;
        } else {
          this.option2.dataZoom[0].startValue = num1 += 1;
          this.option2.dataZoom[0].endValue = num2 += 1;
        }
        this.myChart2.setOption(this.option2);
      }, 4000);

    },
    activeClick(str, i) {
      if (str === "active1") {
        this.active1 = i;
        this.myChart1.dispose();

        clearInterval(this.startCharts1);
        if (i) {
          this.option2xseriesdata1 = this.option2data3; //今年税收  产业月度经济趋势
          this.option2xseriesdata2 = this.option2data4; //去年税收  产业月度经济趋势
        } else {
          this.option2xseriesdata1 = this.option2data1; //今年应税收入  产业月度经济趋势
          this.option2xseriesdata2 = this.option2data2; //去年应税收入  产业月度经济趋势
        }
        clearInterval(this.myCharttimer);
        this.myCharttimer = null;
        this.$nextTick(() => {
          this.getrevenuestr();
        });
      }
      if (str === "active2") {
        this.active2 = i;
        this.myChart2.dispose();
        clearInterval(this.timersetInterval);
        this.timersetInterval = null;
        clearInterval(this.startCharts2);
        if (this.active2) {

          this.option1xseriesdata1 = this.option1data2; //今年税收 区域月度经济趋势
          this.option1xseriesdata2 = this.option1data4; //去年税收 区域月度经济趋势
        } else {
          this.option1xseriesdata1 = this.option1data1; //默认今年应税收入 区域月度经济趋势
          this.option1xseriesdata2 = this.option1data3; //默认去年应税收入 区域月度经济趋势
        }
        this.$nextTick(() => {
          this.gettableColorstr();
        });
      }
      if (str === "active3") {
        this.active3 = i;
        var str = "";
        this.active3 ? (str = "tax_revenue") : (str = "taxable_sales_income");
        this.$http
          .post(`/home/government/industryMonitor/industryMonitor`, {
            city: this.options[0].label,
            rankType: str,
          })
          .then(({ data: res }) => {
            this.tableData = res.data.parkRankList;
          });
      }
    },
    selectchange(i) {
      clearInterval(this.timersetInterval);
      this.timersetInterval = null;

      this.$http
        .post(`/home/government/industryMonitor/industryMonitor`, {
          city: i,
          rankType: "taxable_sales_income",
        })
        .then(({ data: res }) => {
          this.option1data4 = res.data.LastCountyTaxRevenue; //去年税收 区域月度经济趋势
          this.option1data2 = res.data.CountyTaxRevenue; //今年税收 区域月度经济趋势
          this.option1data1 = res.data.CountyTaxableSalesIncome; //  今年应税收入 区域月度经济趋势
          this.option1data3 = res.data.LastCountyTaxableSalesIncome; //去年应税收入 区域月度经济趋势
          this.myChart2.dispose();
          if (this.active2) {
            this.option1xseriesdata1 = this.option1data2; //今年税收 区域月度经济趋势
            this.option1xseriesdata2 = this.option1data4; //去年税收 区域月度经济趋势
          } else {
            this.option1xseriesdata1 = this.option1data1; //默认今年应税收入 区域月度经济趋势
            this.option1xseriesdata2 = this.option1data3; //默认去年应税收入 区域月度经济趋势
          }
          this.$nextTick(() => {
            this.gettableColorstr();
          });
        });
    },
    getright_table(tablestr) {
      let _this = this;
      var isScroll = true;
      var waitFlag = 0;
      // 拿到表格挂载后的真实DOM
      const table = this.$refs[tablestr];
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      // let height = document.getElementsByClassName('el-table__body-wrapper')[0].childNodes[0]
      // console.log(height);
      this.addEvent(divData, "mouseenter", function () {
        isScroll = false;
      });
      this.addEvent(divData, "mouseleave", function () {
        isScroll = true;
      });

      let timer = setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1;
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop + 1 >=
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
          }
        }
      }, 100);

    },
    getworkmanshipstr() {
      const that = this;
      this.myChart5 !== "" &&
        this.myChart5 !== null &&
        this.myChart5 !== undefined &&
        this.myChart5.dispose();
      this.myChart5 = echarts.init(document.getElementById("workmanshipstr"));
      this.option5 = {
        // animationDuration: 2000,
        tooltip: {
          trigger: "axis",
          confine: true,
        },
        legend: {
          show: true,
          textStyle: {
            // 图例文字的样式
            color: "#fff",
          },
        },
        dataZoom: [
          {
            type: "inside",
            startValue: 0,
            endValue: 8,
            xAxisIndex: [0],
            zoomLock: true,
          },
        ],
        grid: {
          left: "3%",
          right: "5%",
          bottom: "10%",
          top: "25%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
            },
            axisLine: {
              // 这是y轴文字颜色
              lineStyle: {
                color: "#BFF7FF",
              },
            },
            boundaryGap: false, //坐标轴两边留白
            data: this.option5xAxis,
          },
        ],
        yAxis: {
          type: "value",
          name: "万吨",
          splitLine: {
            lineStyle: {
              color: "#8DAFDD",
            },
          },

          axisLine: {
            // 这是y轴文字颜色
            lineStyle: {
              color: "#BFF7FF",
            },
          },
          axisLabel: {
            interval: 0,
            formatter: function (value, index) {
              var age = value / 10000;
              age = age.toFixed(0);
              return age;
            },
          },
        },
        series: [
          {
            type: "line",
            name: "烧碱",
            // barWidth: 12,

            data: [],
          },
          {
            type: "line",
            name: "烧碱",
            // barWidth: 12,
            data: [],
          },
          {
            type: "line",
            name: "烧碱",
            // barWidth: 12,

            data: [],
          },
          {
            type: "line",
            name: "乙烯",
            // barWidth: 12,

            data: [],
          },
          {
            type: "line",
            name: "氮肥",
            // barWidth: 12,

            data: [],
          },
        ],
      };

      // this.autoPlay2(this.myChart5, this.option5, "startCharts5");
      this.myChart5.on("mouseover", function (param) {
        clearInterval(that.datasetInterval);
        console.log(that.datasetInterval);
      });
      this.myChart5.on("mouseout", function (param) {
        that.getsetInterval();
      });
      this.myChart5.setOption(this.option5);
    },
    getsourcestr() {
      var that = this;

      this.myChart3 = echarts.init(document.getElementById("sourcestr"));

      this.option3 = {
        polar: {
          radius: [0, "80%"],
        },
        legend: {
          show: false,
        },
        radiusAxis: {
          axisLabel: {
            show: false,
          },
          nameGap: 20,
          nameTextStyle: {
            verticalAlign: "top",
          },
          nameLocation: "end",
          axisLine: {
            //外环的线
            show: false,
          },
          axisTick: {
            //一个一个的小刻度
            show: false,
          },
          splitLine: {
            // show: false,
            interval: 100,
            lineStyle: {
              color: "rgba(221, 215, 215, 1)",
              opacity: 0.2,
            },
          },
        },
        angleAxis: {
          type: "category",
          startAngle: 75,

          axisLabel: {
            //周围刻度线的数字
            show: false,
          },
          axisLine: {
            //外环的线
            // show: false
            lineStyle: {
              color: "rgba(221, 215, 215, 1)",
              opacity: 0.2,
            },
          },
          axisTick: {
            // 一个一个的小刻度
            show: false,
          },
        },
        tooltip: {
          confine: true,
        },

        series: [
          {
            type: "bar",

            data: this.option3xseries,
            coordinateSystem: "polar",
          },
        ],
      };

      this.myChart3.setOption(this.option3);
      this.autoPlay(this.myChart3, this.option3, "startCharts3");
    },
    countPercentage(countArray) {
      var resultArray = [];
      for (var i = 0; i < countArray.length; i++) {
        var k = Math.floor((countArray[i] / j) * 100) + "%";
        resultArray.push(k);
      }
      return resultArray;
    },
    gettableColor2str() {
      this.myChart6 = echarts.init(document.getElementById("tableColor2str"));
      this.option6 = {
        // animationDuration: 5000,
        tooltip: {
          trigger: "axis",
          confine: true,
        },
        legend: {
          show: true,
          textStyle: {
            // 图例文字的样式
            color: "#fff",
          },
        },
        dataZoom: [
          {
            type: "inside",
            startValue: 0,
            endValue: 9,
            xAxisIndex: [0],
            zoomLock: true,
          },
        ],
        grid: {
          left: "2%",
          right: "2%",
          bottom: "10%",
          top: "25%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
            },
            axisLine: {
              // 这是y轴文字颜色
              lineStyle: {
                color: "#BFF7FF",
              },
            },

            data: this.option6xAxis,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "亿元",
            splitLine: {
              lineStyle: {
                color: "#8DAFDD",
              },
            },
            axisLine: {
              // 这是y轴文字颜色
              lineStyle: {
                color: "#BFF7FF",
              },
            },
          },
          {
            type: "value",
            name: "%",
            max: 100,
            min: 0,
            splitLine: {
              lineStyle: {
                color: "#8DAFDD",
              },
            },
            axisLine: {
              // 这是y轴文字颜色
              lineStyle: {
                color: "#BFF7FF",
              },
            },
            axisLabel: {
              show: true,
              interval: "auto", //居中显示
              formatter: "{value}", //以百分比显示
            },
          },
        ],
        series: [
          {
            type: "bar",
            name: "进口金额",
            barWidth: 15,
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      // 0% 处的颜色
                      offset: 0,
                      color: "#02C6FF",
                    },
                    {
                      // 100% 处的颜色
                      offset: 1,
                      color: "rgba(2, 198, 255, 0) ",
                    },
                  ],
                  false
                ),
              },
            },
            data: this.option6xseriesdata1,
          },
          {
            type: "bar",
            name: "出口金额",

            yAxisIndex: 0,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      // 0% 处的颜色
                      offset: 0,
                      color: "#32D5A5",
                    },
                    {
                      // 100% 处的颜色
                      offset: 1,
                      color: "rgba(2, 198, 255, 0)",
                    },
                  ],
                  false
                ),
              },
            },
            data: this.option6xseriesdata2,
          },
          {
            type: "line",
            name: "进口率",
            itemStyle: {
              color: "rgba(70, 180, 121, 1)",
            },
            yAxisIndex: 0,
            data: this.option6xseriesdata3,
          },
          {
            type: "line",
            name: "出口率",

            itemStyle: {
              color: "rgba(239, 134, 50, 1)",
            },
            yAxisIndex: 1,
            data: this.option6xseriesdata4,
          },
        ],
      };
      this.option6 = {
        animationDuration: 5000,
        tooltip: {
          trigger: "axis",
          confine: true,
        },
        legend: {
          show: true,
          textStyle: {
            // 图例文字的样式
            color: "#fff",
          },
        },
        dataZoom: [
          {
            type: "inside",
            startValue: 0,
            endValue: 6,
            xAxisIndex: [0],
            zoomLock: true,
          },
        ],
        grid: {
          left: "2%",
          right: "2%",
          bottom: "2%",
          top: "25%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
            },
            axisLine: {
              // 这是y轴文字颜色
              lineStyle: {
                color: "#BFF7FF",
              },
            },
            data: this.option8xAxis,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "万元",
            splitLine: {
              lineStyle: {
                color: "#8DAFDD",
              },
            },
            axisLine: {
              // 这是y轴文字颜色
              lineStyle: {
                color: "#BFF7FF",
              },
            },
            axisLabel: {},
          },
          {
            type: "value",
            name: "%",
            // max: 100,
            // min: 0,
            splitLine: {
              lineStyle: {
                color: "#8DAFDD",
              },
            },
            axisLine: {
              // 这是y轴文字颜色
              lineStyle: {
                color: "#BFF7FF",
              },
            },
            axisLabel: {
              show: true,
              interval: "auto", //居中显示
              formatter: "{value}", //以百分比显示
            },
          },
        ],
        series: [
          {
            type: "bar",
            name: "亩均税收",
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      // 0% 处的颜色
                      offset: 0,
                      color: "#02C6FF",
                    },
                    {
                      // 100% 处的颜色
                      offset: 1,
                      color: "rgba(2, 198, 255, 0) ",
                    },
                  ],
                  false
                ),
              },
            },
            data: this.option8xseriesdata2,
          },

          {
            type: "line",
            yAxisIndex: 1,
            name: "当年同比",
            itemStyle: {
              color: "rgba(70, 180, 121, 1)",
            },
            data: this.option8xseriesdata1,
          },
        ],
      };
      this.myChart6.setOption(this.option6);

      let num1 = 0;
      let num2 = 6;
      this.myChart6IntervalId = setInterval(() => {
        if (
          this.option6.dataZoom[0].startValue + 1 ===
          this.option6.series[0].data.length
        ) {
          num1 = 0;
          num2 = 6;
          this.option6.dataZoom[0].startValue = num1;
          this.option6.dataZoom[0].endValue = num2;
        } else {
          this.option6.dataZoom[0].startValue = num1 += 1;
          this.option6.dataZoom[0].endValue = num2 += 1;
        }
        this.myChart6.setOption(this.option6);
      }, 4000);
      this.autoPlay(this.myChart6, this.option6, "startCharts6");
    },
    getcontentbox() {
      const that=this
      this.myChart7 = echarts.init(document.getElementById("contentbox"));
      this.option7 = {
        animationDuration: 5000,
        tooltip: {
          trigger: "axis",
          confine: true,
        },
        legend: {
          show: true,
          textStyle: {
            // 图例文字的样式
            color: "#fff",
          },
        },
        dataZoom: [
          {
            type: "inside",
            startValue: 0,
            endValue: 6,
            xAxisIndex: [0],
            zoomLock: true,
          },
        ],
        grid: {
          left: "2%",
          right: "2%",
          bottom: "2%",
          top: "25%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                fontSize: "11",
              },
            },

            axisLine: {
              // 这是y轴文字颜色
              lineStyle: {
                color: "#BFF7FF",
              },
            },
            data: this.option7xAxis,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            splitLine: {
              lineStyle: {
                color: "#8DAFDD",
              },
            },
            axisLine: {
              // 这是y轴文字颜色
              lineStyle: {
                color: "#BFF7FF",
              },
            },
            axisLabel: {
              formatter: function (value, index) {
                var age = value / 100000000;
                age = age.toFixed(0);
                return age;
              },
            },
          },
          {
            type: "value",
            name: "%",
            // max: 100,
            // min: 0,
            splitLine: {
              lineStyle: {
                color: "#8DAFDD",
              },
            },
            axisLine: {
              // 这是y轴文字颜色
              lineStyle: {
                color: "#BFF7FF",
              },
            },
            axisLabel: {
              show: true,
              interval: "auto", //居中显示
              formatter: "{value}", //以百分比显示
            },
          },
        ],
        series: [
          {
            type: "bar",
            name: that.setime+"月指数",
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      // 0% 处的颜色
                      offset: 0,
                      color: "#02C6FF",
                    },
                    {
                      // 100% 处的颜色
                      offset: 1,
                      color: "rgba(2, 198, 255, 0) ",
                    },
                  ],
                  false
                ),
              },
            },
            data: this.option7xseriesdata1,
          },

          {
            type: "line",
            yAxisIndex: 1,
            name: "当月环比",
            itemStyle: {
              color: "rgba(70, 180, 121, 1)",
            },
            data: this.option7xseriesdata2,
          },
        ],
      };
      this.myChart7.setOption(this.option7);
      this.autoPlay(this.myChart7, this.option7, "startCharts7");
      let num1 = 0;
      let num2 = 6;
      this.myChart7IntervalId = setInterval(() => {
        if (
          this.option7.dataZoom[0].startValue + 1 ===
          this.option7.series[0].data.length
        ) {
          num1 = 0;
          num2 = 6;
          this.option7.dataZoom[0].startValue = num1;
          this.option7.dataZoom[0].endValue = num2;
        } else {
          this.option7.dataZoom[0].startValue = num1 += 1;
          this.option7.dataZoom[0].endValue = num2 += 1;
        }
        this.myChart7.setOption(this.option7);
      }, 4000);
    },
    getsetInterval() {
      this.datasetInterval = setInterval(() => {
        this.getworkmanshipstr();
        if (this.num === 0) {
          this.option5.series.forEach((i, index) => {
            i.data = this.data1[index];
            i.name = this.data1name[index];
          });
        } else if (this.num === 1) {
          this.option5.series.forEach((i, index) => {
            i.data = this.data2[index];
            i.name = this.data2name[index];
          });
        } else {
          this.option5.series.forEach((i, index) => {
            i.data = this.data3[index];
            i.name = this.data3name[index];
          });
        }
        this.num++;
        this.myChart5.setOption(this.option5);
        if (this.num > 2) {
          this.num = 0;
        }
      }, 7000);
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  background-size: 100% 100%;
  background: #041565;
}

.box {
  padding-top: 10px;
  margin-bottom: 20px;
  overflow: hidden;
  background-image: url("../../../../assets/img/industry/框尺寸1.png");
  background-size: 100% 100%;
}

.content {
  padding: 15px 0 0; //（上15px；左、右0px；下0px。）
}
.content-body {
  padding: 5px;
  margin-top: 5px;
  overflow: hidden;
  > div {
    float: left;
    overflow: hidden;
  }
  .content-body-left {
    width: 44%;
  }
  .content-body-right {
    width: 56%;
  }
}
//滚动条的宽度
.main ::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  display: none;
}
.main ::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: rgba(0, 90, 255, 0);
}
.main ::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 90, 255, 0);
  border-radius: 10px;
  background: #ededed;
}

.title {
  width: 270px;
  margin-left: 10px;
  font-weight: 700;
  font-size: 14px;
  background-image: url("../../../../assets/img/industry/小标题背景1.png");
  background-size: 100% 100%;
  color: #ffffff;

  p {
    padding-left: 26px;
    font-size: 12px;
  }
}
.fl {
  float: left;
}

.fr {
  float: right;
}
.content_box {
  position: absolute;
  top: 0;
  right: 0;
  span {
    color: #ffffff;
    padding: 0px 5px;
    display: inline-block;
    text-align: center;
    line-height: 26px;
    border-radius: 3px;
    margin: 0 5px;
    cursor: pointer;
  }
}
.content_box1 {
  width: 100%;
  text-align: right;

  span {
    color: #ffffff;
    padding: 0px 5px;
    display: inline-block;
    text-align: center;
    line-height: 26px;
    border-radius: 3px;
    margin: 5px;
    cursor: pointer;
  }
}
.active {
  background: linear-gradient(
    0deg,
    rgba(0, 180, 255, 0.4),
    rgba(0, 180, 255, 0.05)
  );
  border: 1px solid #000000;
}
#Colorstr {
  position: absolute;
  top: 5px;
  right: 130px;
  width: 80px;
  height: 20px;
}

/deep/.el-input__inner {
  height: 20px !important;
  line-height: 20px !important;
  padding: 0px !important;
  font-size: 4px !important;
  background: #1f4987 !important;
  border: none !important;
  box-sizing: border-box !important;
  padding-left: 5px !important;
  color: rgba(187, 218, 255, 1) !important;
}
/deep/.el-input__icon {
  height: 20px !important;
  line-height: 20px !important;
}
/deep/.el-input__suffix {
  right: 0 !important;
  padding: 0px !important;
  font-size: 4px !important;
}
/deep/.el-select .el-input .el-select__caret {
  color: rgba(82, 204, 255, 1) !important;
}
/deep/.has-gutter {
  background: #022b7e !important;
  tr {
    background: #022b7e !important;
    th {
      background: #022b7e !important;
      color: #00e4ff !important;
      font-size: 12px !important;
      border: none !important;
    }
  }
}
/deep/ .table-row1 {
  background-color: #082560 !important;
}
/deep/ .table-row2 {
  background-color: #051e79 !important;
}
/deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: transparent;
}
/deep/ .el-table__body {
  width: 100% !important;
}
/deep/.el-table td {
  border: none !important;
  color: rgba(187, 218, 255, 1) !important;
}
/deep/ .el-table tbody tr:hover > td {
  background-color: #5f83ff !important;
}
/deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent; //没有数据也变颜色
}
.enterprise-body {
  float: left;
  width: 80%;
  height: 185px;
  // padding: 25px 5px;
  color: #ffffff;
}
.enterprise-content {
  width: 100%;
  height: 30px;
  // border-bottom: 1px solid #B2D4F0;
  // border-style: dashed;
  padding: 0px 5px;
  float: left;
  width: 50%;
}
.enterprise-color {
  width: 10px;
  height: 10px;
  margin-top: 10px;
  float: left;
}
.enterprise-type {
  font-size: 13px;
  // color: #ffffff;
  line-height: 30px;
  float: left;
  margin-left: 12px;
}
.enterprise-count {
  font-size: 14px;
  line-height: 30px;
  float: right;
}
</style>
